<template>
  <div class="rowBox">
    <el-row :gutter="12">
      <el-col :span="12">
        <div class="rowBox-item">
          <div class="rowBox-head">
            <h3>折线图</h3>
            <sub>line</sub>
          </div>
          <div class="rowBox-main">
            <LineEcharts :data="data.list" :height='320' dayName="day" :seriesSet="[
              {
                key: 'visits',
                name: '点击量',
              },
            ]" />
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="rowBox-item">
          <div class="rowBox-head">
            <h3>柱状图</h3>
            <sub>bar</sub>
          </div>
          <div class="rowBox-main">
            <LineEcharts :data="data.list" :height='320' dayName="day" :seriesSet="[
              {
                key: 'visits',
                name: '点击量',
                type: 'bar'
              },
            ]" />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="12">
      <el-col :span="12">
        <div class="rowBox-item">
          <div class="rowBox-head">
            <h3>饼图</h3>
            <sub>pie</sub>
          </div>
          <div class="rowBox-main">
            <PieEcharts :data="data.list" :height='320' :seriesSet="{
              labelName: 'day',
              valueName: 'visits',
            }" />
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="rowBox-item">
          <div class="rowBox-head">
            <h3>雷达图</h3>
            <sub>radar</sub>
          </div>
          <div class="rowBox-main">
            <RadarEcharts :data="data.actorRole" :height='320' />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

</template>
<script setup lang="ts">
import './pageCss.scss'; // 引入样式
import { useListComponent } from './pageTs'; // 引入逻辑
const { dataInfo } = useListComponent();
import { reactive, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance() as any;
const data = reactive({
  list: [
    { day: '2024-01', visits: 500, visits1: 200 },
    { day: '2024-02', visits: 600, visits1: 300 },
    { day: '2024-03', visits: 700, visits1: 520 },
    { day: '2024-04', visits: 800, visits1: 400 },
    { day: '2024-05', visits: 900, visits1: 420 },
    { day: '2024-06', visits: 400, visits1: 100 },
    { day: '2024-07', visits: 300, visits1: 230 }
  ],
  actorRole: {
    strength: 80,
    agility: 80,
    stamina: 90,
    intelligence: 50,
    spirit: 60,
  }
});
onMounted(() => { });

onBeforeUnmount(() => { });
</script>
